<template>
  <div class="offline-dialog">
    <el-dialog
      title="线下购买课程"
      :visible.sync="isShowOfflinePaymentDialog"
      width="60%"
      :before-close="handleOfflinePaymentClose">
      <span class="current-semester">当前启用的学期 :{{ currentSemesterName }}</span>
      <el-form v-loading="loading">
        <div class="box">

          <div class="select-subject">
            <span class="title">选择学科 :</span>
            <el-select v-model="selectedCompanySubjectId"
                       @change="companySubjectChange"
                       placeholder="请选择购买的学科">
              <el-option
                v-for="(item,index) in companySubjectList"
                :key="index"
                :label="item.Text"
                :value="item.Value">
              </el-option>
            </el-select>
          </div>

          <div class="select-curriculum">
            <span class="title">选择课程 :</span>
            <el-select v-model="form.CompanyCurriculumID"
                       @change="companyCurriculumChange"
                       placeholder="请选择购买的课程">
              <el-option
                v-for="(item,index) in companyCurriculumList"
                :key="index"
                :label="item.ClassName"
                :value="item.ID">
              </el-option>
            </el-select>
          </div>
        </div>
      </el-form>

      <div class="stu-info">学生信息</div>
      <el-table :data="rowInfo" border
                :header-cell-style="{textAlign:'center'}"
                :cell-style="{textAlign:'center'}">
        <el-table-column prop="StudentNo" label="学生编号"></el-table-column>
        <el-table-column prop="Name" label="学生姓名"></el-table-column>
        <el-table-column prop="Phone" label="电话号码"></el-table-column>
        <el-table-column prop="IdentityID" label="身份证号"></el-table-column>
      </el-table>

      <div class="stu-info">课程信息</div>
      <el-table :data="companyCurriculumSelected" border
                :header-cell-style="{textAlign:'center'}"
                :cell-style="{textAlign:'center'}">
        <el-table-column label="课程价格">
          <p slot-scope="scope">{{ scope.row.Price | rounding }}</p>
        </el-table-column>
        <el-table-column label="容纳人数" prop="Accommodate"></el-table-column>
        <el-table-column label="剩余人数" prop="Surplus"></el-table-column>
      </el-table>

        <div class="third">
          <div class="stu-info">课程详情</div>
          <el-table :data="curriculumDetailsList" border
                    :header-cell-style="{textAlign:'center'}"
                    :cell-style="{textAlign:'center'}">
            <el-table-column prop="CampusName" label="上课校区"></el-table-column>
            <el-table-column prop="RoomName" label="教室名称"></el-table-column>
            <el-table-column prop="Name" label="任课教师"></el-table-column>
            <el-table-column prop="Week" label="上课星期"></el-table-column>
            <el-table-column prop="TimeInterval" label="上课时段"></el-table-column>
            <el-table-column label="开始时间-----结束时间" width="200px">
              <p slot-scope="scope">{{ scope.row.StartTime }}-----{{ scope.row.EndTime }}</p>
            </el-table-column>
          </el-table>

        </div>





      <span slot="footer" class="dialog-footer">
    <el-button @click="handleOfflinePaymentClose()">取 消</el-button>
    <el-button type="primary" @click="submitEvent">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
import CompanyCurriculum from '../../../model/companyCurriculum'
import CompanySubject from '../../../model/companySubject'
import Semester from '../../../model/semester'
import CourseOrder from '../../../model/courseOrder'
import CompanyCurriculumDetails from '../../../model/companyCurriculumDetails'

export default {
  name: 'OfflinePaymentDialog',
  props: {
    isShowOfflinePaymentDialog: Boolean,
    mainId: Number,
    rowInfo: Array
  },
  data () {
    return {
      loading: false,
      form: {
        ID: this.mainId,
        Price: '',
        CompanyCurriculumID: '',
        Accommodate: '',
        Surplus: ''
      },
      companyCurriculumQueryInfo: {
        SubjectID: '',
        //课程名称
        ClassName: '',
        Page: 1,
        Limit: 10
      },
      curriculumDetailsQueryInfo: {
        SubjectID: '',
        CurriculumID: '',
        Page: 1,
        Limit: 10
      },
      //当前正在启用学期的id值
      currentSemesterId: '',
      //当前正在启用学期的名称
      currentSemesterName: '',
      //保存学科信息
      companySubjectList: [],
      //学科下拉框中被选中的值
      selectedCompanySubjectId: '',
      //保存课程信息
      companyCurriculumList: [],
      companyCurriculumSelected: [],
      //保存线下购买课程后的订单号
      orderNo: '',
      //保存课程详情信息
      curriculumDetailsList: []

    }
  },
  created () {
    this.getCurrentSemester()
  },
  filters: {
    rounding (value) {
      return value.toFixed(2)
    }
  },
  methods: {
    handleOfflinePaymentClose () {
      this.$emit('handleOfflinePaymentClose')
    },
    //获取当前正在启用的学期的信息
    async getCurrentSemester () {
      const res = await Semester.GetCurrentSemester()
      this.currentSemesterId = res[0].Value
      this.currentSemesterName = res[0].Text
      //有了学期ID ，获取学科信息
      await this.getCompanySubjectInfo()
    },
    //获取学科信息
    async getCompanySubjectInfo () {
      const res = await CompanySubject.PageSearchList({ ID: this.currentSemesterId })
      this.companySubjectList = res
    },
    //学科下拉框变化的时候触发
    companySubjectChange (value) {
      this.companyCurriculumQueryInfo.SubjectID = value
      this.curriculumDetailsQueryInfo.SubjectID = value
      this.getCompanyCurriculumInfo()
      this.form.CompanyCurriculumID = null
      this.form.Price = null
    },
    //根据学科，获取课程信息
    async getCompanyCurriculumInfo () {
      const res = await CompanyCurriculum.PageSearch(this.companyCurriculumQueryInfo)
      this.companyCurriculumList = res.ListData
      console.log(this.companyCurriculumList)
    },
    //课程下拉框中数据变化时候触发
    async companyCurriculumChange (value) {
      this.curriculumDetailsQueryInfo.CurriculumID = value
      const res = await CompanyCurriculum.SearchModelDetails({ ID: this.form.CompanyCurriculumID })
      this.form.Price=res.Price
      this.companyCurriculumSelected = []
      this.companyCurriculumSelected.push(res)
      const result = await CompanyCurriculumDetails.PageSearch(this.curriculumDetailsQueryInfo)
      this.curriculumDetailsList = result.ListData
      // result.ListData.forEach(item=>{
      //   this.curriculumDetailsList.push(item)
      // })

    },
    //提交数据
    async submitEvent () {
      if (this.selectedCompanySubjectId === '') {
        this.$message.error('学科为必选项，请选择')
      } else if (this.form.CompanyCurriculumID === '' || this.form.CompanyCurriculumID === null) {
        this.$message.error('课程为必选项，请选择')
      } else {
        try {
          //200的情况
          this.loading = true
          const res = await CourseOrder.ManagePurchaseCourse(this.form)
          if (res.Status == 200) {
            console.log(res)
            await CourseOrder.AcknowledgementOrder({ OrderNo: res.Data })
            this.$message.success('线下购买该课程成功')
            this.handleOfflinePaymentClose('submitButton')
          }
          if (res.Status == 201) {
            const confirmResult = await this.$confirm('该课程与此学生之前购买的课程的上课时间冲突，是否继续下单?',
              '购买课程提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              })
            if (confirmResult !== 'confirm') {
              this.$message.info('已取消购买该课程的操作')
            } else {
              CourseOrder.AcknowledgementOrder({ OrderNo: res.Data })
              this.$message.success('线下购买该课程成功')
              this.handleOfflinePaymentClose()
            }
          }

        } catch (err) {
          this.loading = false
          this.handleOfflinePaymentClose()
        }
      }
    },
  }
}
</script>

<style scoped>
.box {
  margin-top: 30px;
}

.current-semester {
  color: #DC143C;
  font-weight: bold;
}

.box {
  display: flex;
  margin-bottom: 30px;
}

.select-curriculum {
  margin-left: 100px;
}

.price {
  color: #DC143C;
  font-weight: bold;
}

.stu-info {
  text-align: center;
  margin: 30px 0;
  font-size: 18px;
  font-weight: bold;
}

.second-in {
  display: flex;
  justify-content: space-around;

}

.second-in div {
  padding: 0 20px;
  font-weight: bold;
  font-size: 14px;
}

.table-box{
  display: flex;
  justify-content: space-between;
}



</style>
